<template>
    <a-modal
        :title="null"
        :footer="null"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :maskClosable="false"
        :closable="false"
        wrapClassName="bottom-modal"
    >
        <slot name="modal-content">
            <div>默认占位提示</div>
        </slot>
    </a-modal>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

defineProps({
    visible: Boolean,
});

const emits = defineEmits(['update:visible']);

const handleOk = () => {
    emits('update:visible', false);
};

const handleCancel = () => {
    emits('update:visible', false);
};
</script>

<style lang="scss">
.bottom-modal {
    .ant-modal {
        position: fixed;
        bottom: 0;
        top: initial;
        width: 100% !important;
        max-width: none;
        margin: 0;
        padding-bottom: 0;

        &-content {
            border-radius: 16px 16px 0 0;
        }

        &-body {
            padding-bottom: 24px;
        }
        .bottom-modal-default-title {
            color: rgba(0, 0, 0, 0.65);
            font-size: 20px;
            font-weight: 400;
            line-height: 30px;
            letter-spacing: 0%;
            text-align: center;
        }
    }
}
</style>
